<template>
  <div class="home">
    <div class="container">
      <div class="first">
        <DataTop />
      </div>
      <div class="seacond">
        <FinanceData />
        <StudentData />
      </div>

      <div class="third">
        <TodoList />
        <CourseInfo />
      </div>
      <div class="four">
        <TeacherInfo />
        <Education />
      </div>
    </div>
  </div>
</template>
<script>


import DataTop from "./components/dataTop";
import FinanceData from "./components/FinanceData";
import StudentData from "./components/StudentData";
import TodoList from "./components/TodoList";
import CourseInfo from "./components/CourseInfo";
import Education from "./components/Education";
import TeacherInfo from "./components/TeacherInfo";


export default {
  components: {
    DataTop,
    FinanceData,
    StudentData,
    TodoList,
    CourseInfo,
    Education,
    TeacherInfo,
  },
};
</script>
<style lang="less" scoped>
.seacond,
.third,
.four {
  display: flex;
  justify-content: space-evenly;
}
.third,
.four {
  margin-top: 20px;
}
.home {
  position: relative;
}
.container {
  width: 1250px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding-bottom: 20px;
}
</style>
